React Navigation ইনস্টল এবং কনফিগার করা

React Navigation হল React Native অ্যাপ্লিকেশনের জন্য একটি জনপ্রিয় লাইব্রেরি যা আপনাকে নেভিগেশন পরিচালনা করতে সাহায্য করে। এটি বিভিন্ন ধরনের নেভিগেশন স্ট্যাক (Stack), ট্যাব (Tab), সাইড মেনু (Drawer) ইত্যাদি সমর্থন করে। এখানে আমি বিস্তারিতভাবে React Navigation ইনস্টল এবং কনফিগার করার প্রক্রিয়া বর্ণনা করব।

প্রথম ধাপ: প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করা

React Navigation ব্যবহার করতে হলে প্রথমে কিছু প্যাকেজ ইনস্টল করতে হবে। নীচে টার্মিনালে একে একে কমান্ডগুলি চালিয়ে সমস্ত প্যাকেজ ইনস্টল করুন:

১. React Navigation এর মূল প্যাকেজ ইনস্টল করা

npm install @react-navigation/native

২. নেভিগেশন স্ট্যাকের জন্য প্যাকেজ ইনস্টল করা (Stack Navigator)

npm install @react-navigation/stack

৩. React Native Gesture Handler এবং React Native Reanimated ইনস্টল করা

React Navigation সঠিকভাবে কাজ করতে react-native-gesture-handler এবং react-native-reanimated প্রয়োজন:

npm install react-native-gesture-handler react-native-reanimated

(MacOS/Linux) যদি আপনি react-native-reanimated ব্যবহার করেন, তবে আপনি babel plugin ইনস্টল করতে পারেন:

npm install babel-plugin-reanimated

৪. React Native Screens ইনস্টল করা

React Navigation আরো ভালো পারফরম্যান্সের জন্য react-native-screens লাইব্রেরি ব্যবহার করে:

npm install react-native-screens

৫. React Native Linking এবং অ্যাপ্লিকেশন লিঙ্কিং (যদি প্রয়োজন হয়)

নিচের কমান্ডটি চালিয়ে React Native অ্যাপ্লিকেশনটির লিঙ্কিং নিশ্চিত করুন:

npx react-native link

দ্বিতীয় ধাপ: React Navigation কনফিগার করা

React Navigation কনফিগার করতে নীচের ধাপগুলো অনুসরণ করুন:

১. App.js ফাইলে React Navigation এবং স্ট্যাক নেভিগেটর সেটআপ করা

এখন আপনার অ্যাপের App.js ফাইলে নেভিগেটর কনফিগার করুন। নিচে একটি সহজ উদাহরণ দেয়া হলো যেখানে স্ট্যাক নেভিগেটর ব্যবহার করা হয়েছে:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native'; // এটি মূল কন্টেইনার
import { createStackNavigator } from '@react-navigation/stack'; // স্ট্যাক নেভিগেটর

// স্ক্রীন কম্পোনেন্টস
import HomeScreen from './screens/HomeScreen'; // আপনার HomeScreen কম্পোনেন্ট
import DetailsScreen from './screens/DetailsScreen'; // আপনার DetailsScreen কম্পোনেন্ট

// স্ট্যাক নেভিগেটর তৈরি করা
const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

এখানে আমরা একটি Stack Navigator তৈরি করেছি, যা দুটি স্ক্রীন (Home এবং Details) নেভিগেট করতে সাহায্য করবে।

তৃতীয় ধাপ: স্ক্রীন কম্পোনেন্ট তৈরি করা

এখন আমরা দুটি স্ক্রীন তৈরি করব, HomeScreen.js এবং DetailsScreen.js।

HomeScreen.js:

import React from 'react';
import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

export default HomeScreen;

DetailsScreen.js:

import React from 'react';
import { View, Text } from 'react-native';

const DetailsScreen = () => {
  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
};

export default DetailsScreen;

চতুর্থ ধাপ: React Navigation এর অন্যান্য নেভিগেটর ব্যবহার করা (যদি প্রয়োজন হয়)

React Navigation আরো ধরণের নেভিগেটর সমর্থন করে, যেমন Drawer Navigator এবং Tab Navigator। নিচে এইগুলো কনফিগার করার প্রক্রিয়া বর্ণনা করা হলো:

1. Tab Navigator

npm install @react-navigation/bottom-tabs

এরপর, App.js ফাইলে Tab Navigator ব্যবহার করুন:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Details" component={DetailsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

2. Drawer Navigator

npm install @react-navigation/drawer

এরপর, App.js ফাইলে Drawer Navigator ব্যবহার করুন:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Details" component={DetailsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

পঞ্চম ধাপ: React Navigation এর কাস্টমাইজেশন

React Navigation বিভিন্ন কাস্টমাইজেশন অপশন প্রদান করে, যেমন:

1. নেভিগেশন স্ট্যাকের হেডার কাস্টমাইজেশন:
   আপনি স্ট্যাক নেভিগেটরের হেডার কাস্টমাইজ করতে পারেন:

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ headerTitle: 'Custom Home Title' }}
/>

2. নেভিগেশন ট্রানজিশন কাস্টমাইজেশন:
   আপনি বিভিন্ন নেভিগেশন ট্রানজিশন স্টাইল কাস্টমাইজ করতে পারেন, যেমন:

<Stack.Navigator
  screenOptions={{
    headerShown: false, // হেডার আড়াল করতে
    gestureEnabled: true, // পৃষ্ঠা স্লাইড ট্রানজিশন চালু করতে
  }}
>

সারাংশ

React Navigation একটি শক্তিশালী লাইব্রেরি যা React Native অ্যাপ্লিকেশনে নেভিগেশন পরিচালনার জন্য ব্যবহৃত হয়। এটি বিভিন্ন ধরনের নেভিগেশন স্ট্যাক (Stack), ট্যাব (Tab), সাইড মেনু (Drawer) সমর্থন করে। React Navigation ইনস্টল এবং কনফিগার করা সহজ, এবং এটি বিভিন্ন কাস্টমাইজেশন এবং ফিচারের মাধ্যমে আপনার অ্যাপের নেভিগেশন উন্নত করতে সাহায্য করে।